<template>
    <div style="width:500;margin:0px auto;">
        <h2>填写个人信息</h2>
        <hr>
        用户账号：<input type="text" v-model="form.name">
        <hr>
        用户密码：<input type="password" v-model="form.pwd">
        <hr>
        手机号码： <input type="text" v-model="form.phone">
        <br>
        <span style="color:red" v-show="showPhoneErr">格式有误（11位手机号码格式）</span>
        <hr>
        证件类型：
        <input type="radio" value="sfz" v-model="form.zj">身份证
        <input type="radio" value="sbk" v-model="form.zj">社保卡
        <input type="radio" value="jgz" v-model="form.zj">军官证
        <input type="radio" value="jz" v-model="form.zj">驾照
        <hr>
        证件号码：<input type="text" v-model="form.idcard">
        <hr>
        选择行业：
        <input type="checkbox" value="jy" v-model="form.hy">教育
        <input type="checkbox" value="jr" v-model="form.hy">金融
        <input type="checkbox" value="yl" v-model="form.hy">医疗
        <input type="checkbox" value="zmt" v-model="form.hy">自媒体
        <hr>
            <select v-model="form.jg">
                <option value="hb">河北省</option>
                <option value="hn">河南省</option>
                <option value="sd">山东省</option>
                <option value="sx">山西省</option>
            </select>
        <hr>
        <button @click="submit">立即注册</button>
        &nbsp;&nbsp;
        <button @click="form={hy:[]}">重置表单</button>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                showPhoneErr:false,
            form:{
                name:'',//双向绑定账号
                pwd:'',
                phone:'',
                zj:'',//绑定单选按钮的证件类型
                idcard:'',
                hy:[],//绑定行业
                jg:'sd'
            }
         }
      },
      methods:{
        submit(){
            console.log(this.form)
        }
      },
      watch: {
        'form.phone':function(newValue, oldValue) {
           //通过正则表达式验证newValue是否符合手机验证格式
           let reg = /^1[3-9]\d{9}$/;
           if(reg.test(newValue)){
            console.log('验证通过')
            this.showPhoneErr = false
           }else{
            console.warn('失败！')
            this.showPhoneErr = true
           }
        }
      },
    }
</script>

<style lang="scss" scoped>

</style>